<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2024-06-25 11:05:16
 * @LastEditors: jhw
 * @LastEditTime: 2024-06-27 16:02:37
-->
<template>
  <div>
    <el-button :type="'primary'" :size="'default'" @click="handleAdd">新增</el-button>
    <JTable :config="tableConfig" :data="tableData" @pageChange="handlePageChange">
      <template #operation="{ row }">
        <el-button :type="'primary'" link :size="'default'" @click="handleEdit(row)">编辑</el-button>
        <el-button :type="'primary'" link :size="'default'">删除</el-button>
      </template>
    </JTable>
    <DialogForm ref="dialogFormRef"></DialogForm>
  </div>
</template>

<script setup lang="ts">
import JTable from '@/components/JTable/index.vue';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { TableConfig } from '@/components/JTable/config';

const DialogForm = defineAsyncComponent(() => import('./components/dialogForm.vue'));
const dialogFormRef = ref();

interface ITableData {
  date: string;
  age: number;
  address: string;
  name: string;
  id: number;
}

// 表格配置
const tableConfig = ref<TableConfig<ITableData>>({
  columns: [
    {
      label: 'Date',
      prop: 'date',
      type: 'default',
    },
    {
      label: 'Age',
      prop: 'age',
      type: 'default',
    },
    {
      label: 'address',
      prop: 'address',
      type: 'default',
    },
    {
      label: 'Name',
      prop: 'name',
      type: 'default',
    },
    {
      label: '操作',
      prop: 'slot',
      type: 'slot',
      slotName: 'operation',
    },
  ],
  queryParams: {
    pageNumber: 1,
    pageSize: 10,
  },
  total: 15,
  pageConfig: {},
});

// 展示数据，一般从接口获取
const tableData = ref<Array<ITableData>>([
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
  {
    date: '2023-10-25',
    age: 18,
    address: '上海市普陀区金沙江路 1518 弄',
    name: '王小虎',
    id: 1,
  },
]);

const handlePageChange = () => {
  console.log('pageChange', { ...tableConfig.value.queryParams });
};

const handleAdd = () => {
  dialogFormRef.value?.handleOpen();
};

const handleEdit = (row: ITableData) => {
  console.log('编辑', row);
  let params = {
    name: 'test',
    age: 122,
    datepicker: '',
    sex: '1',
    select2: '',
    timepicker: '',
    treeSelect: '',
    radio: '',
    rate: 0,
    slider: 0,
    switch: 1,
    checkbox: ['1', '2'],
    colorpicker: '',
  };
  dialogFormRef.value?.handleEdit(params);
};

onMounted(() => {
  const element = document.getElementsByClassName('el-main')[0];
  if (element) {
    element.addEventListener('wheel', (e) => {}, { passive: true });
  }
});
</script>

<style scoped></style>
